<template>
  <div id="mainportal" class="container" style="overflow: hidden;background-color: #F5F5F5;">

  <comhead :title="pagetype === 'edit' ?'编辑地址':'新增地址'" isLeftIcon="true" leftIconName="angle-left" @leftClick="foBack()" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>
   



  <div style='background-color:#fff'>
    <div class='input_box'>
      <div class="weui-cell weui-cell_input">
        <div class="weui-cell__hd">
          <div class="weui-label">收件人</div>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input" type='text' maxlength='8' placeholder="收件人" bindinput='handleInpue' v-model='contactName'  />
        </div>
      </div>
    </div>


    <div class='input_box'>
      <div class="weui-cell weui-cell_input">
        <div class="weui-cell__hd">
          <div class="weui-label">联系电话</div>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input" type='text' placeholder="联系电话" bindinput='handleInpue' v-model='contactMobile'  />
        </div>
      </div>
    </div>
    <div class='input_box'>
      <div class="weui-cell weui-cell_input">
        <div class="weui-cell__hd">
          <div class="weui-label">所在地区</div>
        </div>
         <div class="weui-cell__bd" style="display:flex">

   <select v-model="province" style="flex:1;width: 100%;" @change="getCityList" >
     <option :value="{}">请选择</option>
        <option v-for="(item,index) in provinceList" :value="item">
            {{item.name}}
        </option>
   </select>

             <select v-model="city" style="flex:1; width: 100%;" @change="getCountryList">
     <option :value="{}">请选择</option>
               
        <option v-for="(item,index) in cityList " :value="item">
            {{item.name}}
        </option>
   </select>

             <select v-model="country" style="flex:1;width: 100%;" >
     <option :value="{}">请选择</option>
               
        <option v-for="(item,index) in countryList " :value="item">
            {{item.name}}
        </option>
   </select>



        </div>
         
  <!-- <mt-popup
  v-model="popupVisible"
  position="bottom" style="width:100%;padding:20px 0;"> -->
<!-- <mt-picker :slots="slots" @change="onValuesChange" valueKey="name" ></mt-picker> -->

<!-- </mt-popup> -->



      </div>
    </div>


    <div class='input_box'>
      <div class="weui-cell weui-cell_input" style='margin:0;padding-left:20px;'>
        <div class="weui-cell__hd">
          <div class="weui-label">详细地址</div>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input"  placeholder="详细地址" bindinput='handleInpue' v-model='address'  />
        </div>
      </div>
    </div>

    <div class='input_box' style='display:none'>
      <div class="weui-cell weui-cell_input">
        <div class="weui-cell__bd">
          <div class="weui-input" style='display:flex;align-items:center;'>
            <div style='display:flex;align-items:center;' >
              <img v-if="isDefault" src='../../image/onbolck.png' style="width:20px;height:20px;padding:5px;" :style="initDefalut  ?'opacity:0.5':'' "/>
              <img v-else src='../../image/bolck.png' style='width:20px;height:20px;padding:5px;'/>
              <div>设置为默认地址</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div style='padding: 40px 20px 20px'>
    <button style="border:1px;    width: 100%;"  :style=" contactName==='' ||contactMobile===''||address===''  ?'background-color:#9ED99D;color:rgba(255, 255, 255, 0.6);':'    background-color: #1AAD19;    color: #FFFFFF;'" @click='save()'>保存地址
    </button>
  </div>





  </div>
</template>

 
 

<script>
import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
import { Indicator } from "mint-ui";
import { Tabbar, TabItem } from "mint-ui";
import { TabContainer, TabContainerItem } from "mint-ui";
import comhead from "../../common/coffee/Comhead";

export default {
  data() {
    return {
      popupVisible: true,
      provinceList: [],
      cityList: [],
      countryList: [],
      province: {},
      city: {},
      country: {},

      isDefault: false,
      initDefalut: false,
      range: [],
      countryCodeIndex: 1,
      region: ["北京市", "北京市", "东城区"], //下标
      pagetype: "", //页面类型  edit  add
      contactName: "",
      contactMobile: "",
      address: "",
      twoIndex: 0, //bug 第二列不更新  备用第二列下标
      idList: [],
      addressid: ""
    };
  },
  computed: {},

  methods: {
    StringToId(provinceName, cityName, countryName) {
      let self = this;
      let url = this.$baseUrl.bizUrl + "/address/querycityid";
      let data = {
        provinceName: provinceName,
        cityName: cityName,
        countryName: countryName
      };

      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }

        if (res.data.status != 200) {
          console.log("请求数据错误" + url);
          return;
        }
        if (res.data.status === 200) {
          console.log("名字查对象", res.data.data);
          this.city = res.data.data.city;
          this.country = res.data.data.country;
          this.province = res.data.data.province;
          this.getCityList();
          this.getCountryList();
        }
      };
      this.$reqFormPost(url, data, callBack);
    },
    save() {
        if(this.contactName==='' ||this.contactMobile===''||this.address==='' ){
          return
        }
      if (!this.province.id && !this.city.id && !this.country.id) {
        MessageBox.alert("请选择地址");
        return;
      }

      let self = this;
      let url = "";
      let data = {};

      if (this.pagetype === "add") {
        url = this.$baseUrl.bizUrl + "/address/add";
        data = {
          token: this.$store.getters.getLoginStatus.token,
          userId: this.$store.getters.getLoginStatus.userId,
          provinceId: this.province.id,
          cityId: this.city.id,
          countryId: this.country.id,
          address: this.address,
          contactName: this.contactName,
          contactMobile: this.contactMobile,
          isDefault: this.isDefault
        };
      } else {
        url = this.$baseUrl.bizUrl + "/address/update";
        data = {
          token: this.$store.getters.getLoginStatus.token,
          userId: this.$store.getters.getLoginStatus.userId,
          addressId: this.addressid,
          provinceId: this.province.id,
          cityId: this.city.id,
          countryId: this.country.id,
          address: this.address,
          contactName: this.contactName,
          contactMobile: this.contactMobile,
          isDefault: this.isDefault
        };
      }

      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }

        if (res.data.status != 200) {
          console.log("请求数据错误" + url);
          return;
        }
        if (res.data.status === 200) {
          Toast({
            message: "保存成功"
          });
          this.$router.replace("/addlist");
        }
      };
      this.$reqFormPost(url, data, callBack);
    },
    getProvinceList() {
      let self = this;
      let url = this.$baseUrl.bizUrl + "/address/queryprovince";
      let data = {};
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }

        if (res.data.status != 200) {
          console.log("请求数据错误" + url);
          return;
        }
        if (res.data.status === 200) {
          this.provinceList = res.data.data.region;
        }
      };
      this.$reqFormPost(url, data, callBack);
    },
    getCityList() {
      let self = this;
      let url = this.$baseUrl.bizUrl + "/address/querycity";
      let data = {
        provinceId: this.province.id
      };
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }

        if (res.data.status != 200) {
          console.log("请求数据错误" + url);
          return;
        }
        if (res.data.status === 200) {
          this.cityList = res.data.data.region;
        }
      };
      this.$reqFormPost(url, data, callBack);
    },

    getCountryList() {
      let self = this;
      let url = this.$baseUrl.bizUrl + "/address/querycountry";
      let data = {
        cityId: this.city.id
      };
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }

        if (res.data.status != 200) {
          console.log("请求数据错误" + url);
          return;
        }
        if (res.data.status === 200) {
          this.countryList = res.data.data.region;
        }
      };
      this.$reqFormPost(url, data, callBack);
    },

    goSign() {
      this.$router.push({ name: "sign" });
    },
    foBack() {
      this.$router.go(-1);
    }
  },
  mounted() {
    this.getProvinceList();
    this.pagetype = this.$route.query.pagetype;
    if (this.$route.query.pagetype === "edit") {
      // 通过名字查对象出来
      let def = false;
      if (this.$route.query.isdefault === 1) {
        def = true;
      }
      this.addressid = this.$route.query.addressid;
      this.contactName = this.$route.query.contactname;
      this.contactMobile = this.$route.query.contactmobile;
      this.address = this.$route.query.address;
      this.isdefault = def;
      this.initDefalut = def;
      this.StringToId(
        this.$route.query.provinceName,
        this.$route.query.cityName,
        this.$route.query.countryName
      );
          document.title = '修改地址'
      
    }else{
          document.title = '添加地址'

    }

  },
  components: {
    Tabbar,
    TabItem,
    TabContainer,
    TabContainerItem,
    comhead,
    Swipe,
    SwipeItem
  }
};
</script>
<style>
.weui-cell {
  display: flex;
  align-items: center;
  border-bottom: solid 1px #e5e5e5;

  margin: 0 10px;
  padding: 0;
}
.weui-cell__bd {
  text-align: right;
}

.weui-cell_input {
  height: 4rem;
  margin: 0 0 0 20px;
}
.weui-cell__bd {
  margin-right: 20px;
}
.weui-label {
  width: 70px;
}
.weui-input {
  flex: 1;
}
.picker-item {
  font-size: 14px;
}
</style>



<!-- Add "scoped" attribute to limit CSS to this component only -->
